<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋 - 棋士馆</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header .logo {
            font-size: 24px;
        }

        header .user-options a {
            margin-left: 15px;
            color: #fff;
            text-decoration: none;
        }

        nav {
            background-color: #222;
            color: #fff;
            padding: 10px 20px;
        }

        nav ul {
            list-style: none;
            display: flex;
            justify-content: space-around;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
        }

        .go-intro, .game-controls, .go-board-section {
            text-align: center;
            margin: 30px 0;
        }

        .go-intro h1, .game-controls h2, .go-board-section h2 {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .go-intro p, .game-controls p {
            font-size: 18px;
            color: #555;
        }

        .game-controls .buttons {
            margin-top: 20px;
        }

        .game-controls button {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 0 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .game-controls button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .go-board-section {
            text-align: center;
            margin-top: 40px;
        }

        .go-board {
            display: grid;
            grid-template-columns: repeat(15, 40px);
            grid-template-rows: repeat(15, 40px);
            gap: 2px;
            justify-content: center;
            margin: 0 auto;
            border: 1px solid #333;
        }

        .go-board div {
            width: 40px;
            height: 40px;
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .go-board div.black > .stone {
            background-color: black;
        }

        .go-board div.white > .stone {
            background-color: white;
        }

        .stone {
            width: 30px;
            height: 30px;
            border-radius: 50%; /* 使棋子呈圆形 */
            border: 1px solid #333;
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header>
        <div class="logo">棋士馆</div>
        <div class="user-options">
            <a href="#">登录/注册</a>
            <a href="#">语言选择</a>
        </div>
    </header>

    <!-- Navigation Bar -->
    <nav>
        <ul>
            <li><a href="首页.html">首页</a></li>
            <li><a href="游戏.html">游戏</a></li>
            <li><a href="比赛.html">比赛</a></li>
            <li><a href="论坛.html">论坛</a></li>
            <li><a href="科普.html">科普</a></li>
            <li><a href="教程.html">教程</a></li>
            <li><a href="联系我们.html">联系我们</a></li>
        </ul>
    </nav>

    <!-- Game Introduction Section -->
    <section class="go-intro">
        <h1>五子棋</h1>
        <p>五子棋是一种简单但充满策略的棋类游戏，目标是连续放置五颗相同颜色的棋子（横、竖或斜线）形成一条直线。</p>
        <p>棋士馆为您提供一个便捷的在线五子棋对弈平台，欢迎新手和高手一同挑战！</p>
    </section>

    <!-- Game Controls Section -->
    <section class="game-controls">
        <h2>游戏控制</h2>
        <div class="buttons">
            <button id="startBtn" onclick="startGame()">开始游戏</button>
            <button id="pauseBtn" onclick="pauseGame()" disabled>暂停游戏</button>
            <button id="undoBtn" onclick="undoMove()" disabled>悔棋</button>
            <button id="restartBtn" onclick="restartGame()" disabled>再来一局</button>
        </div>
    </section>

    <!-- Game Board Section -->
    <section class="go-board-section">
        <h2>五子棋棋盘</h2>
        <div id="goBoard" class="go-board">
            <!-- The board will be dynamically generated by JavaScript -->
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <p>© 2024 棋士馆 | 联系我们</p>
    </footer>

    <script>
        let gameBoard = [];
        let currentPlayer = 'black'; // 黑方先行
        let gamePaused = false;
        let moveHistory = [];

        function initializeBoard() {
            const board = document.getElementById('goBoard');
            gameBoard = [];

            for (let row = 0; row < 15; row++) {
                let rowArray = [];
                for (let col = 0; col < 15; col++) {
                    const cell = document.createElement('div');
                    cell.addEventListener('click', () => placeStone(row, col));
                    board.appendChild(cell);
                    rowArray.push(null); // 空白位置
                }
                gameBoard.push(rowArray);
            }
        }

        function placeStone(row, col) {
            if (gamePaused || gameBoard[row][col]) return; // 如果游戏暂停或该位置已被占用，忽略

            // 放置棋子
            gameBoard[row][col] = currentPlayer;
            const cell = document.getElementsByClassName('go-board')[0].children[row * 15 + col];

            // 仅在当前位置添加新棋子
            const stone = document.createElement('div');
            stone.classList.add('stone');
            stone.style.backgroundColor = currentPlayer === 'black' ? 'black' : 'white';
            cell.appendChild(stone);

            // 保存棋步
            moveHistory.push({ row, col, player: currentPlayer });

            // 检查是否有五子连线
            if (checkWin(row, col)) {
                alert(`${currentPlayer === 'black' ? '黑方' : '白方'} 胜利！`);
                pauseGame();
                return;
            }

            // 切换玩家
            currentPlayer = (currentPlayer === 'black') ? 'white' : 'black';

            // 更新按钮状态
            document.getElementById('undoBtn').disabled = false;
        }

        function checkWin(row, col) {
            const directions = [
                { r: 0, c: 1 },  // 横向
                { r: 1, c: 0 },  // 纵向
                { r: 1, c: 1 },  // 斜向 (正)
                { r: 1, c: -1 }  // 斜向 (反)
            ];

            for (let dir of directions) {
                let count = 1;

                // 向一个方向检查
                for (let i = 1; i < 5; i++) {
                    let r = row + dir.r * i;
                    let c = col + dir.c * i;
                    if (r < 0 || r >= 15 || c < 0 || c >= 15 || gameBoard[r][c] !== currentPlayer) break;
                    count++;
                }

                // 向另一个方向检查
                for (let i = 1; i < 5; i++) {
                    let r = row - dir.r * i;
                    let c = col - dir.c * i;
                    if (r < 0 || r >= 15 || c < 0 || c >= 15 || gameBoard[r][c] !== currentPlayer) break;
                    count++;
                }

                // 如果连续五颗棋子
                if (count >= 5) return true;
            }
            return false;
        }

        function startGame() {
            document.getElementById('pauseBtn').disabled = false;
            document.getElementById('restartBtn').disabled = false;
            document.getElementById('startBtn').disabled = true;
            initializeBoard();
        }

        function pauseGame() {
            gamePaused = !gamePaused;
            document.getElementById('pauseBtn').innerText = gamePaused ? '继续游戏' : '暂停游戏';
        }

        function restartGame() {
         // 清空棋盘和游戏状态
         gameBoard = [];
         moveHistory = [];
         currentPlayer = 'black'; // 黑方先行
         gamePaused = false;  // 游戏不暂停
         document.getElementById('undoBtn').disabled = true;  // 禁用悔棋按钮

        // 重新初始化棋盘
         initializeBoard();

        // 更新按钮状态
         document.getElementById('startBtn').disabled = true;  // 已开始游戏，不能再点击
         document.getElementById('pauseBtn').disabled = false; // 可以暂停
         document.getElementById('restartBtn').disabled = false;  // 重新开始按钮有效
    }

        function undoMove() {
            if (moveHistory.length === 0) return;  // 如果没有棋步，忽略
             const lastMove = moveHistory.pop();    // 获取最后一步
            gameBoard[lastMove.row][lastMove.col] = null; // 清除棋盘上的最后一步

             // 找到并删除棋子
              const cell = document.getElementsByClassName('go-board')[0].children[lastMove.row * 15 + lastMove.col];
             if (cell.firstChild) {
              cell.removeChild(cell.firstChild);  // 删除该位置的棋子
            }

            currentPlayer = lastMove.player;  // 切换回上一个玩家

             // 更新按钮状态
            document.getElementById('undoBtn').disabled = moveHistory.length === 0;
        }
        function initializeBoard() {
             const board = document.getElementById('goBoard');
             board.innerHTML = ''; // 清空棋盘内容
             for (let row = 0; row < 15; row++) {
             let rowArray = [];
             for (let col = 0; col < 15; col++) {
             const cell = document.createElement('div');
             cell.addEventListener('click', () => placeStone(row, col)); // 给每个格子绑定点击事件
             board.appendChild(cell);
             rowArray.push(null); // 初始时棋盘为空
             }
             gameBoard.push(rowArray);
             }
        }
    </script>
</body>
</html>
